<!-- 正文开始 -->
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <!-- 头部操作栏 -->
      <div class="layui-form lay-header">
        <div class="toolbar">
          <div class="layui-form-item lay-query-content">
            <div class="lay-query-box">
              <div class="query-lt">
                <!-- <div class="layui-inline">
                  <label class="layui-form-label w-auto">工位名称：</label>
                  <div class="layui-input-inline">
                    <input
                      name="workshopName"
                      class="layui-input"
                      type="text"
                      placeholder="工位名称"
                    />
                  </div>
                </div> -->
                <!-- <div class="layui-inline">
                  <button
                    class="layui-btn icon-btn color-green"
                    lay-filter="formSubSearchLog"
                    lay-submit
                    layui-form-keyDownSearch="true"
                  >
                    查询
                  </button>
                  <button
                    class="layui-btn icon-btn color-white"
                    lay-filter="resets"
                    lay-submit
                  >
                    重置
                  </button>
                </div> -->
              </div>
              <div class="query-rt"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <table
        class="layui-table"
        id="productionWorkStationTable"
        lay-filter="productionWorkStationTable"
      ></table>
    </div>
  </div>
</div>
<style>
  .left-btn {
    flex: 1;
    text-align: left;
  }
  .flex-between {
    width: calc(100% - 40px);
    display: flex;
    justify-content: space-between;
  }
  .productionWorkStationAddForm .layui-form-item .layui-input-inline {
    width: 290px;
  }
  .productionWorkStationAddForm .w-auto {
    width: 100px !important;
  }
  .selectProductDetail .layui-table-cell {
    height: auto;
  }
</style>
<!-- 表格操作列 -->
<script type="text/html" id="productionWorkStationTableBar">
  <!-- {{# if(d.skuCode != ""){  }} -->
  <!-- <a class="layui-btn layui-btn-xs" lay-event="inProduct">在产工单信息</a> -->
  <!-- {{# } }} -->
  <!-- <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="rowProduct"
    >排产工单</a
  > -->
  <a class="layui-btn layui-btn-xs" lay-event="hisBtn">领料记录</a>
</script>

<!--在产工单信息-->
<script id="inProductWorkOrderTemplate" type="text/html">
  <form
    lay-filter="inProductWorkOrderForm"
    class="layui-form model-form form-scroll"
  >
    <div class="open-details-box pd-20">
      <div class="work-info" style="padding-top: 25px;">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label w-auto">工单编号：</label>
            <div class="layui-input-inline">
              <input
                name="workOrderCode"
                class="layui-input br0"
                type="text"
                readonly="readonly"
              />
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label w-auto">所属计划：</label>
            <div class="layui-input-inline">
              <input
                name="planCode"
                class="layui-input br0"
                type="text"
                readonly="readonly"
              />
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label w-auto">交货时间：</label>
            <div class="layui-input-inline">
              <input
                name="deliveryTime"
                class="layui-input br0"
                type="text"
                readonly="readonly"
              />
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label w-auto">订单录入人：</label>
            <div class="layui-input-inline">
              <input
                name="keyboarder"
                class="layui-input br0"
                type="text"
                readonly="readonly"
              />
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label w-auto">询价审核人：</label>
            <div class="layui-input-inline">
              <input
                name="enquiryAuditPerson"
                class="layui-input br0"
                type="text"
                readonly="readonly"
              />
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label w-auto">报价截止时间：</label>
            <div class="layui-input-inline">
              <input
                name="expirationDate"
                class="layui-input br0"
                type="text"
                readonly="readonly"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="layui-form-item table-bor">
        <div class="layui-form-item" style="margin-bottom: 0;">
          <div class="open-details-title">工序排产明细</div>
        </div>
        <table
          class="layui-table"
          id="inProductSkuTable"
          lay-filter="inProductSkuTable"
        ></table>
      </div>
      <div class="layui-form-item table-bor">
        <table
          class="layui-table"
          id="inProductDeviceTable"
          lay-filter="inProductDeviceTable"
        ></table>
      </div>
      <div class="layui-form-item table-bor">
        <div class="layui-form-item" style="margin-bottom: 0;">
          <div class="open-details-title">工序关联物料明细</div>
        </div>
        <table
          class="layui-table"
          id="inProductMaterialTable"
          lay-filter="inProductMaterialTable"
        ></table>
      </div>
    </div>
    <div class="layui-form-item text-right pd-20">
      <button
        class="layui-btn layui-btn-primary"
        type="button"
        ew-event="closeDialog"
      >
        取消
      </button>
    </div>
  </form>
</script>

<!--表格操作按钮-->
<script type="text/html" id="deviceWorkOrderTableBar">
  <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
</script>

<!--排产工单-->
<script id="rowProductWorkOrderTemplate" type="text/html">
  <div class="layui-form model-form form-scroll">
    <div class="open-details-box pd-20">
      <form lay-filter="productionStationForm" class="layui-form model-form">
        <div class="layui-form-item" style="margin-bottom: 10px;">
          <div class="open-details-title">工站生产任务信息</div>
        </div>
        <div class="layui-col-xs3">
          <div class="layui-form-item">
            <label class="layui-form-label">设备编码</label>
            <div class="layui-input-block">
              <input
                name="deviceCode"
                type="text"
                class="layui-input"
                readonly
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs3">
          <div class="layui-form-item">
            <label class="layui-form-label">设备类型</label>
            <div class="layui-input-block">
              <input
                name="deviceType"
                type="text"
                class="layui-input"
                readonly
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs3">
          <div class="layui-form-item">
            <label class="layui-form-label">设备型号</label>
            <div class="layui-input-block">
              <input
                name="deviceModel"
                type="text"
                class="layui-input"
                readonly
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs3">
          <div class="layui-form-item">
            <label class="layui-form-label">在产订单</label>
            <div class="layui-input-block">
              <input name="code" type="text" class="layui-input" readonly />
            </div>
          </div>
        </div>
        <div class="layui-col-xs3">
          <div class="layui-form-item">
            <label class="layui-form-label">在产物料</label>
            <div class="layui-input-block">
              <input name="skuCode" type="text" class="layui-input" readonly />
            </div>
          </div>
        </div>
        <div class="layui-col-xs3">
          <div class="layui-form-item">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-block">
              <input
                name="createTime"
                type="text"
                class="layui-input"
                readonly
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs3">
          <div class="layui-form-item">
            <label class="layui-form-label">待产工单</label>
            <div class="layui-input-block">
              <input
                name="expectantQuantity"
                type="text"
                class="layui-input"
                readonly
              />
            </div>
          </div>
        </div>
        <div class="layui-col-xs3">
          <div class="layui-form-item">
            <label class="layui-form-label">完工时间</label>
            <div class="layui-input-block">
              <input
                name="predictStartTime"
                type="text"
                class="layui-input"
                readonly
              />
            </div>
          </div>
        </div>
      </form>
      <div class="layui-form-item">
        <div class="layui-form-item" style="margin-bottom: 10px;">
          <div class="open-details-title">制造令信息</div>
        </div>
        <table
          class="layui-table"
          id="deviceWorkOrderTable"
          lay-filter="deviceWorkOrderTable"
        ></table>
      </div>
    </div>
    <div class="layui-form-item text-right pd-20">
      <button
        class="layui-btn layui-btn-primary"
        type="button"
        ew-event="closeDialog"
      >
        取消
      </button>
    </div>
  </div>
</script>

<!-- js部分 -->
<script>
  layui.use(["layer", "form", "table", "admin"], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    var config = layui.config;
    var admin = layui.admin;
    var upload = layui.upload;

    // 渲染表格
    var insTb = table.render({
      elem: "#productionWorkStationTable",
      url:
        config.base +
        "production/productionPlan/admin/productionWorkStation/list",
      page: true,
      cellMinWidth: 100,
      cols: [
        [
          // {type: 'numbers', title: '序号', align: 'center'}
          // ,{field: 'deviceCode', title: '设备编码', align: 'center'}
          // ,{field: 'deviceType', title: '设备类型', align: 'center'}
          // ,{field: 'deviceModel', title: '设备型号', align: 'center'}
          // ,{field: 'code', title: '在产订单', align: 'center', width: 150}
          // ,{field: 'skuCode', title: '在产物料', align: 'center'}
          // ,{field: 'createTime', title: '预计开始时间', align: 'center', width: 160}
          // ,{field: 'expectantQuantity', title: '待产工单', align: 'center'}
          // ,{field: 'predictStartTime', title: '预计完工时间', align: 'center', width: 160}
          // ,{field: 'statusDesc', title: '状态', align: 'center'}
          {
            field: "workshopName",
            title: "工位名称",
            align: "center",
          },
          {
            field: "workstationNatureName",
            title: "工位性质",
            align: "center",
          },
          { field: "gzsbName", title: "工种/设备信息", align: "center" },
          { field: "countQuantity", title: "领料记录数", align: "center" },
          {
            align: "center",
            toolbar: "#productionWorkStationTableBar",
            title: "操作",
            width: 200,
          },
        ],
      ],
    });

    //监听排序
    table.on("sort(productionWorkStationTable)", function (obj) {
      table.reload("productionWorkStationTable", {
        initSort: obj,
        where: {
          sort: obj.field,
          order: obj.type,
        },
      });
    });

    // 搜索
    form.on("submit(formSubSearchLog)", function (data) {
      insTb.reload({ where: data.field, page: { curr: 1 } }, "data");
    });

    // 重置搜索
    form.on("submit(resets)", (data) => {
      insTb.reload(
        { where: admin.resetSearch(data.field), page: { curr: 1 } },
        "data"
      );
    });

    form.render("select");

    // 工具条点击事件
    table.on("tool(productionWorkStationTable)", function (obj) {
      var data = obj.data;
      //   if (obj.event === "inProduct") {
      //     // 在产工单
      //     inProductWorkOrderModel(data);
      //   } else if (obj.event === "rowProduct") {
      //     // 排产工单
      //     rowProductWorkOrderModel(data);
      //   }
      if (obj.event === "hisBtn") {
        admin.formOpen({
          type: 1,
          area: ["80%", "80%"],
          title: "领料记录",
          path: "components/res/receiptRecord/receiptRecord.html",
          success: function () {
            parentData.where = {
              workShopId: data.workShopId,
              isNotNeedOk: 1,
            };
          },
        });
      }
    });

    // 在产工单信息
    function inProductWorkOrderModel(data) {
      console.info(data, 9090);
      // 产品信息
      admin.req(
        "production/makeOrder/admin/makeOrder/get",
        {
          productionProcessDeviceId: data.productionProcessDeviceId,
        },
        function (res) {
          if (res.code == 200) {
            admin.putTempData("makeOrderDetail", res.data);
          } else {
            layer.msg(res.msg, { icon: 2 });
          }
        },
        "GET"
      );

      admin.formOpen({
        area: ["80%", "85%"],
        title: "制造令详情",
        style: "font-size: 20px;",
        path: "components/productionPlan/makeOrder_detail.html",
      });
    }

    // 排产工单详情
    function rowProductWorkOrderModel(data) {
      admin.open({
        type: 1,
        area: ["80%", "80%"],
        title: "工站生产任务详情",
        content: $("#rowProductWorkOrderTemplate").html(),
        success: function () {
          //数据回显
          form.val("productionStationForm", data);
          form.render();

          var deviceWorkOrderTable = table.render({
            elem: "#deviceWorkOrderTable",
            url:
              config.base +
              "production/productionPlan/admin/productionPlan/getDeviceWorkOrderPageList?deviceCode=" +
              data.deviceCode,
            page: true,
            cellMinWidth: 100,
            cols: [
              [
                { type: "numbers", title: "序号" },
                {
                  field: "code",
                  title: "工单编码",
                  align: "center",
                  width: 150,
                },
                { field: "processName", title: "所属工序", align: "center" },
                {
                  field: "planCode",
                  title: "所属生产计划",
                  align: "center",
                  width: 140,
                },
                {
                  field: "workOrderQualityDesc",
                  title: "工单性质",
                  align: "center",
                },
                {
                  field: "skuName",
                  title: "物料名称",
                  align: "center",
                  width: 150,
                },
                { field: "skuCode", title: "物料编码", align: "center" },
                {
                  field: "productTypeName",
                  title: "所属系列",
                  align: "center",
                },
                {
                  field: "productionQuantity",
                  title: "计划数量",
                  align: "center",
                },
                { field: "outputQuantity", title: "排产数量", align: "center" },
                // , {field: 'predictFinishTime', title: '预计完工时间', align: 'center', width: 160}
                { field: "statusDesc", title: "状态", align: "center" },
                {
                  align: "center",
                  toolbar: "#deviceWorkOrderTableBar",
                  title: "操作",
                  width: 100,
                },
              ],
            ],
          });

          form.on("submit(deviceWorkOrderFormSubSearchLog)", function (data) {
            deviceWorkOrderTable.reload(
              { where: data.field, page: { curr: 1 } },
              "data"
            );
            //return false;
          });
          // 工具条点击事件
          table.on("tool(deviceWorkOrderTable)", function (obj) {
            if (obj.event === "detail") {
              obj.data.productionProcessDeviceId =
                data.productionProcessDeviceId;
              inProductWorkOrderModel(obj.data);
            }
          });
        },
      });
    }
  });
</script>
